import React from 'react';
import PropTypes from 'prop-types';
import { Carousel } from 'antd';
import BannerAnim, { Element, Arrow } from 'rc-banner-anim';
import 'rc-banner-anim/assets/index.css';
import css from './index.less';
import SliderPage from 'modules/slider/components/sliderPage/preview';
const BgElement = Element.BgElement;

export default class Slider extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
  };

  renderSliderPage(item, index) {
    const props = {
      className: css.sliderPage,
      mod: item,
    };
    return (
      <Element
        key={`slider-page-${index}`}
        sync={true}
      >
        <BgElement
          key="bg"
          style={{
            ...item.style,
            backgroundColor: item.backgroundColor,
            backgroundImage: `url(${item.backgroundImage})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            position: 'absolute',
          }}
        />
        <SliderPage {...props} />
      </Element>
    );
  }

  render() {
    const { mod } = this.props;
    const wrapProps = {
      // 样式
      style: mod.style,
      // className: css.wrap,
    };
    const props = {
      // 轮播属性
      autoPlay: mod.autoPlay,
      duration: mod.speed,
      autoPlaySpeed: mod.delay,
      dragPlay: mod.dragPlay,
      ease: mod.easing,
      type: mod.direction,
      arrow: mod.arrow,
      thumb: mod.dots,
      style: mod.style,
      sync: true,
    };

    return (
      <div {...wrapProps}>
        <BannerAnim {...props}>
          {
            mod.list.map((item, index) => {
              return this.renderSliderPage(item, index);
            })
          }
        </BannerAnim>
      </div>
    );
  }
}
